<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div id="Application">
      <div class="container">
        <div class="subTitle">加入我们，一起创造美好世界</div>
        <h1 class="title">创建你的账号</h1>
        <div
          v-for="(item, index) in fields"
          class="inputContainer"
          :key="index"
        >
          <div class="field">
            {{ item.title }}
            <span v-if="item.required" style="color: red">*</span>
            <input v-model="item.model" :type="item.type" class="input" />
            <div class="tip" v-if="index === 2">请确认密码长度需要大于6位</div>
          </div>
        </div>
        <div class="subContainer">
          <div class="setting">偏好设置</div>
          <input v-model="receiveMsg" type="checkbox" class="checkbox" /><label
            class="label"
            >接收更新邮件</label
          >
        </div>
        <button @click="createAccount" class="btn">创建账号</button>
      </div>
    </div>

    <script>
      const { createApp, ref, computed } = Vue;
      let config = {
        setup() {
          const fields = ref([
            {
              title: "用户名",
              required: true,
              type: "text",
              model: "",
            },
            {
              title: "邮箱",
              required: false,
              type: "email",
              model: "",
            },
            {
              title: "密码",
              required: true,
              type: "password",
              model: "",
            },
          ]);
          const receiveMsg = ref(false);
          const name = computed({
            get() {
              return fields.value[0].model;
            },
            set(newValue) {
              fields.value[0].model = newValue;
            },
          });
          const email = computed({
            get() {
              return fields.value[1].model;
            },
            set(newValue) {
              fields.value[1].model = newValue;
            },
          });
          const password = computed({
            get() {
              return fields.value[2].model;
            },
            set(newValue) {
              fields.value[2].model = newValue;
            },
          });
          const emailCheck = () => {
            let verify = /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
            if (!verify.test(email.value)) {
              return false;
            }
            return true;
          };
          const createAccount = () => {
            if (name.value.length === 0) {
              alert("用户名不能为空");
              return
            } else if (password.value.length < 6) {
              alert("密码长度不能小于6位");
              return
            } else if (email.value.length > 0 && !emailCheck(email.value)) {
              alert("邮箱格式不正确");
              return
            }
            alert("创建成功");
            console.log(name.value, email.value, password.value, receiveMsg.value)
          };
          return { fields, createAccount, receiveMsg, password, email, name };
        },
      };
      createApp(config).mount("#Application");
    </script>

    <style>
      .container {
        margin: 0 auto;
        margin-top: 70px;
        text-align: center;
        width: 300px;
      }
      .subTitle {
        color: grey;
        font-size: 14px;
      }
      .title {
        font-size: 45px;
      }
      .inputContainer {
        text-align: left;
        margin-bottom: 20px;
      }
      .subContainer {
        text-align: left;
      }
      .field {
        font-size: 14px;
      }
      .input {
        width: 90%;
        border-width: 1px;
        border-radius: 6px;
        height: 25px;
        margin-top: 10px;
        border-color: silver;
        border-style: solid;
        background-color: cornsilk;
      }
      .tip {
        margin-top: 5px;
        font-size: 12px;
        color: grey;
      }
      .setting {
        font-size: 9px;
        color: black;
      }
      .label {
        font-size: 12px;
        margin-left: 5px;
        height: 20px;
        vertical-align: middle;
      }
      .checkbox {
        height: 20px;
        vertical-align: middle;
      }
      .btn {
        border-radius: 10px;
        height: 40px;
        width: 300px;
        margin-top: 30px;
        background-color: deepskyblue;
        border-color: blue;
        color: white;
      }
    </style>
  </body>
</html>
